<template>
	<view class="box">
		<!-- 导航栏 -->
		<navBar title='我的博客' :isSlot="false" :isNav="true"></navBar>

		<view class="cellBox" v-for="item in blogList" :key="item.id">
			<text>{{item.title}}</text>
			<u--text :lines="2" :text="item.content"></u--text>
			<view>
			{{$u.timeFormat(item.createdAt, 'yyyy/mm/dd/ hh:MM:ss')}}
			</view>
			<view class="footCellBox">
				<view class="footCellBoxLeft">
					<text>阅读</text>
					<text>赞同</text>
					<text>评论</text>
					<text>数据</text>
				</view>
				<view class="footCellBoxRight">
					<text>···</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyBlog
	} from "@/config/api.js";
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				limitData: {
					limit: 6,
					offset: 0
				},
				blogList: [],
			};
		},
		methods: {
			async initGetMyBlog() {
				const getMyBlogData = await getMyBlog(this.limitData, this.userInfo.token)
				this.blogList = getMyBlogData.data.data.rows
				this.blogList.forEach(time=>{
					time.createdAt = new Date(time.createdAt).getTime()
				})
			}
		},
		onLoad() {
			this.initGetMyBlog()
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 3vw;
	}

	.cellBox {
		width: 100%;
		height: 20vh;
		border-radius: 20px;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		box-sizing: border-box;
		padding: 0 5vw;
		box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
		margin-bottom: 3vh;

		.footCellBox {
			display: flex;
			justify-content: space-between;

			.footCellBoxLeft {
				width: 50vw;
				display: flex;
				justify-content: space-between;
			}
		}
	}
	
	::v-deep .u-text{
		flex: 0;
	}
	
	/*	#ifdef MP-WEIXIN */
	::v-deep .u-text.data-v-50004b49 {
		flex: 0;
	}
	
	/* #endif */
</style>
